<template>
    <div class="application-records-page">
        <div class="top-section">
            <h1>{{$route.meta.title}}</h1>
            <p class="num">共<span>{{queryData.total}}</span>条记录</p>
        </div>
        <el-empty v-if="queryData.total == 0 && !tableLoading" description="暂无投递记录" />
        <ul class="records-list" v-loading="tableLoading">
            <li v-for="record in tableData" :key="record.id">
                <div class="left-info">
                    <p class="tit">{{ record.postName }}</p>
                    <span class="time">投递时间：{{ formatDate(record.applyTime) }}</span>
                </div>
                <el-tag :type="getStateType(record.state)">
                    {{ record.state }}
                </el-tag>
            </li>
        </ul>
        <PaginationView
        :total="queryData.total"
        :pageSize="queryData.pageSize"
        :currentPage="queryData.currentPage"
        :allChoose="isAllChooseBtn"
        :pageChoose="isPageChooseBtn"
        :options="batchOptions"
        :checkedNum="checkedNum"
        :canChoose="false"
        @changeSize="handleSizeChange"
        @currentChange="handleCurrentChange"
        @changePageChoose="handlePageChoose"
        @changeAllChoose="handleAllChoose"
        @invertChoose="handleInvertChoose"
        @checkOption="handleBatchOptions"
        @refreshList="handleGetRecordPage"
        @cancelChoose="handleResetPagination"
      />
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { selectRecordPage } from '@/api/record'
import { tableList as mixTable } from '@ruifox-cms/utils'
import dayjs from 'dayjs'
//获取投递记录
//分页器
const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectRecordPage,
});
const defaultForm = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})
Object.assign(queryData, defaultForm);

// const handleGetRecordPage = async () => {
//   loading.value = true
//   try {
//     const res = await selectRecordPage(queryData)
//     queryData.total = res.data.total;
//     tableData.value = res.data.list;
//   } catch (error) {
//     console.error('获取投递记录失败:', error)
//   } finally {
//     loading.value = false
//   }
// }
// handleGetRecordPage()

const getStateType = state => {
  const stateMap = {
    未审核: 'info',
    已通过: 'success',
    未通过: 'danger'
  }
  return stateMap[state] || 'info'
}
const formatDate = timestamp => {
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
}
onMounted(() => {
    getTableData()
})
</script>

<style lang="scss" scoped>
.application-records-page {
    border-radius: px2rem(10);
    box-shadow: 0 0 10px rgba(#000,0.1);
    padding: px2rem(40);
    box-sizing: border-box;
    .top-section {
        display: flex;
        align-items:center;
        justify-content: space-between;
        .num {
            font-size: px2rem(16);
            span {
                color: var(--el-color-primary); 
                font-weight: bold;
            }
        }
    }
    h1 {
        color: var(--el-color-primary); 
    }
    .records-list {
        margin-top: px2rem(40);
        padding: 0;
        li {
            display: flex;
            justify-content: space-between;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: px2rem(20);
            box-sizing: border-box;
            margin-bottom: px2rem(15);
            transition: all 0.3s;
            &:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }
            .left-info {
                .tit {
                    font-size: px2rem(18);
                    margin-bottom: px2rem(10);
                }
                .time {
                    font-size: px2rem(16);
                    line-height: 1;
                    color: #666;
                }
            }
        }
    }
}
@media (max-width:960px) {
    .application-records-page {
        padding: 0;
        box-shadow: none;
        .records-list {
            margin-top: 20px;
            li {
                flex-wrap: wrap;
                gap: 10px;
            }
        }
    }
}
</style>